<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <meta charset="utf-8">
    <!-- 360浏览器极速模式 -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>棋盘编辑</title>
    <%@ include file="/pages/common/head.jsp" %>
    <style>
        img {
            width: 100px;
            height: 60px;
        }
    </style>
</head>
<body>
棋盘编号: ${requestScope.board.id}<br>
棋盘图片: &nbsp;<img id="board_img" src="static/board_img/${requestScope.board.name}.jpg" alt="">
<input id="boardImgFile" type="file" name="boardImgFile">
<span id="fileErrMsg"></span><br>
棋盘名: <input id="boardName" type="text" value="${requestScope.board.name}">
<span id="nameErrMsg"></span><br>
价格: <input id="price" type="text" value="${requestScope.board.price}">
<span id="priceErrMsg"></span><br>
<button id="save">保存</button>
<script type="text/javascript">
    $(function () {
        const adminId = '${requestScope.adminId}';
        
        let fileLegal = true;
        let nameLegal = true;
        let priceLegal = true;
        let existsName = false;

        const namePattern = /^[\S]+$/;
        const pricePattern = /^\d+(\.\d+)?$/;
        
        let boardName = '${requestScope.board.name}';
        let price = '${requestScope.board.price}';

        $('#boardImgFile').change(function () {
            if (this.value) {
                const file = this.files[0];
                if (file.type !== 'image/jpeg') {
                    fileLegal = false;
                    $('#fileErrMsg').text('文件类型不合法（请使用 jpg 格式图片）');
                    return;
                }
                fileLegal = true;
                $('#fileErrMsg').text('');
                // 读取文件
                const reader = new FileReader();
                reader.onload = function (e) {
                    const data = e.target.result;
                    $('#board_img').attr('src', data);
                };
                reader.readAsDataURL(file);
            }
        });

        $('#boardName').blur(function () {
            boardName = $.trim(this.value);
            if (boardName === '${requestScope.board.name}') {
                $('#nameErrMsg').text('');
                nameLegal = true;
                existsName = false;
                return;
            }
            if (!namePattern.test(boardName)) {
                nameLegal = false;
                $('#nameErrMsg').text('棋盘名不合法！');
                return;
            }
            nameLegal = true;
            $('#nameErrMsg').text('');
            $.getJSON("boardServlet?action=checkExists", {
                name: boardName
            }, function (exists) {
                existsName = exists;
                if (existsName) {
                    $('#nameErrMsg').text('棋盘名已存在！')
                    return
                }
                $('#nameErrMsg').text('')
            });
        });

        $('#price').blur(function () {
            price = $.trim(this.value);
            if (!pricePattern.test(price)) {
                priceLegal = false;
                $('#priceErrMsg').text('价格格式不正确！');
                return;
            }
            priceLegal = true;
            $('#priceErrMsg').text('');
        });

        $('#save').click(function () {
            if (!fileLegal) {
                return false;
            }
            if (!nameLegal || existsName) {
                $('#boardName').focus();
                return false;
            }
            if (!priceLegal) {
                $('#price').focus();
                return false;
            }
            $.getJSON("boardServlet?action=setName", {
                adminId: adminId,
                boardId: ${requestScope.board.id},
                name: boardName
            }, function (success) {
                if (!success) {
                    alert('保存失败！');
                    return;
                }
                $.getJSON("boardServlet?action=setPrice", {
                    adminId: adminId,
                    boardId: ${requestScope.board.id},
                    price: price
                }, function () {
                    if (!$('#boardImgFile').val()) {
                        alert('保存成功！');
                        return;
                    }
                    const formData = new FormData();
                    formData.append('adminId', adminId);
                    formData.append('boardId', ${requestScope.board.id});
                    formData.append('boardImgFile', $('#boardImgFile')[0].files[0]);
                    $.ajax({
                        url: "${basePath}boardServlet?action=updateImg",
                        type: 'post',
                        data: formData,
                        dataType: 'json',
                        cache: false,
                        processData: false,
                        contentType: false,
                        success: function (result) {
                            if (!result) {
                                alert('保存失败！');
                                return;
                            }
                            alert('保存成功！');
                        }
                    });
                });
            });
        });
    });
</script>
</body>
</html>
